﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Test Case 21: "required" attribute on checkboxes and radio buttons &laquo; Web Forms 2.0 Test Suite</title>
		<meta name="author" content="Weston Ruter">
		<meta name="description" content="">
		<script type="text/javascript" src="../webforms2-p.js"></script>
		<link rel="stylesheet" type="text/css" href="testcase.css"><!-- ISSUE: When this stylesheet is placed here after the script tag, MSIE sometimes cannot initialize Repetition Model before onload -->
		<!-- prev --><link rel="prev" href="020.html"><!-- /prev -->
		
		<link rel="home" href="index.html">
		
		<script type="text/javascript">
                
		</script>
		<style type="text/css">
                
		</style>
		
	</head>
	<body>
		<div id="testSuiteNote">

			<h1>Web Forms 2.0 Test Case 21: "required" attribute on checkboxes and radio buttons</h1>
			<p class="purpose">
			This test case demonstrates functionality of the Web Forms 2.0 specification and tests the compliance of 
			this cross-browser <a href="http://code.google.com/p/webforms2/">Web Forms 2.0 implementation</a>.</p>

			 <p>The specification <a href="http://www.w3.org/TR/web-forms-2/#required0">states</a>:</p> <blockquote> <p>For checkboxes, the <code>required</code> attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.</p> <p>For radio buttons, the <code>required</code> attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.</p> </blockquote> <p> Specifying a <code>required</code> attribute on a <code>checkbox</code> only makes sense when there are multiple <code>checkbox</code>es defined to be in a group by providing each with the same <code>name</code> attribute (as the quote from the specification makes reference to). In Opera 9.23 when a <code>required</code> attribute is specified on either one or all <code>radio</code> buttons in a group, the form validates if one of the buttons is checked. With regard to a group of <code>checkbox</code>es, however, when the <code>required</code> attribute is defined on one <code>checkbox</code>, that one specific <code>checkbox</code> must be checked in order for the form to validate in Opera. If the <code>required</code> attribute is defined on all <code>checkbox</code>es in the group, then the form only validates if every <code>checkbox</code> is checked. Opera's implementation, then, is faulty, since it does not make sense to present the user with a single checkbox that must always be checked, and since the specification states that UAs must apply the <code>required</code> attribute onto the entire group of checkboxes, not every single one individually. <p> <!--<p>The specification does not make it clear if the <code>required</code> attribute must be specified on all of the checkboxes and radio buttons in a group.</p>--> 
			
			<div class="testSuiteNavigation">
				<!-- prev -->&larr;&nbsp;<a href="020.html" class="prev">Creating Repetition Templates Dynamically</a> |<!-- /prev -->
				<a href="index.html" class="index">Test Suite Index</a>
				
			</div>
			
			<hr>
		</div>
  


                <form action="javascript:alert('Form is valid!'); void(0)">
                    <fieldset>
                            <legend><code>required</code> attribute set <em>all</em> controls in a group</legend>
                            <p>Favorite color:
                            <label><input type="radio" name="favColor1" value="red" required /> red</label>
                            <label><input type="radio" name="favColor1" value="green" required /> green</label>
                            <label><input type="radio" name="favColor1" value="blue" required /> blue</label></p>
                            <p>Favorite food:
                            <label><input type="checkbox" name="favFoods1" value="baba ganouj" required /> baba ganouj</label>
                            <label><input type="checkbox" name="favFoods1" value="massaman curry" required /> massaman curry</label>
                            <label><input type="checkbox" name="favFoods1" value="pho" required /> pho</label></p>
                    </fieldset>

                    <fieldset>
                            <legend><code>required</code> attribute set on <em>last</em> control of a group</legend>
                            <p>Favorite color:
                            <label><input type="radio" name="favColor2" value="red" /> red</label>
                            <label><input type="radio" name="favColor2" value="green" /> green</label>
                            <label><input type="radio" name="favColor2" value="blue" required /> blue (<code>required</code>)</label></p>
                            <p>Favorite food:
                            <label><input type="checkbox" name="favFoods2" value="baba ganouj" /> baba ganouj</label>
                            <label><input type="checkbox" name="favFoods2" value="massaman curry" /> massaman curry</label>
                            <label><input type="checkbox" name="favFoods2" value="pho" required /> pho (<code>required</code>)</label></p>
                    </fieldset>
                    <p><input type="submit" value="Submit"></p>
                </form>

		

		<hr>
		<a href="http://code.google.com/p/webforms2/">Web Forms 2.0 implementation</a><br>
		Version: 0.5.2 (2007-11-29) <a href="http://code.google.com/p/webforms2/wiki/Changelog">changelog</a>
		<address>
		<a href="http://weston.ruter.net/">Weston Ruter</a>
		</address>
	</body>
</html>